<template>
  <div class="Full" @click="btnScreen">
    <img :src="$store.state.fullScreen ? exit : full" alt="" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      full: require('@/assets/full.png'),
      exit: require('@/assets/exit.png')
    }
  },
  methods: {
    btnScreen() {
      this.$store.commit('setfullScreen')
      var element = document.getElementById('app') //指定全屏区域元素
      if (!this.$store.state.fullScreen) {
        console.log('退出全屏')
        // document.exitFullscreen()
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        console.log('进入全屏')
        // element.requestFullscreen()
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen()
        }
      }
    },
    fullScreen() {},
    exitFullScreen() {}
  }
}
</script>
<style lang="scss" scoped>
.Full {
  display: flex;
  justify-content: flex-end;
  margin-right: 20px;
  margin-top: 20px;
  height: 30px;
  line-height: 30px;
  color: #efc799;
  border: 2px solid #efc799;
  cursor: pointer;
  caret-color: transparent;
  padding: 0 5px;
  img {
    width: 30px;
  }
}
</style>
